<template>
  <div class="container" v-resize="resize">
    <div class="item" v-if="isEnableNetdisk===1">
      <div class="item_title">
        <div class="title_border"></div>
        <div class="title">基本情况</div>
      </div>
      <div class="basic_msg">
        <el-card class="basic_item">
          <div class="sub_title">
            分配情况
          </div>
          <div class="item_bottom">
            <div class="charts">
              <div class="pieChart" ref="distribution"></div>
            </div>
            <div class="data_msg">
              <div>
                <span class="label">存储总量：</span>
                <span class="value">{{ schoolStorage ? schoolStorage.toFixed(2) : schoolStorage }}GB</span>
              </div>
              <div>
                <span class="label">个人分配总量：</span>
                <span class="value">{{ userStorage ? userStorage.toFixed(2) : userStorage }}GB</span>
              </div>
              <div>
                <span class="label">群组分配总量：</span>
                <span class="value">{{ groupStorage ? groupStorage.toFixed(2) : groupStorage }}GB</span>
              </div>
              <div>
                <span class="label">未分配总量：</span>
                <span class="value">{{ noDistribution ? noDistribution.toFixed(2) : noDistribution }}GB</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="basic_item">
          <div class="sub_title">
            个人使用情况
          </div>
          <div class="item_bottom">
            <div class="charts">
              <div class="pieChart" ref="personUse"></div>
            </div>
            <div class="data_msg">
              <div>
                <span class="label">个人分配总量：</span>
                <span class="value">{{ personTotal ? personTotal.toFixed(2) : personTotal }}GB</span>
              </div>
              <div>
                <span class="label">个人使用总量：</span>
                <span class="value">{{ personUse ? personUse.toFixed(2) : personUse }}GB</span>
              </div>
              <div>
                <span class="label">待使用总量：</span>
                <span class="value">{{ personNouse ? personNouse.toFixed(2) : personNouse }}GB</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="basic_item">
          <div class="sub_title">
            群组使用情况
          </div>
          <div class="item_bottom">
            <div class="charts">
              <div class="pieChart" ref="groupUse"></div>
            </div>
            <div class="data_msg">
              <div>
                <span class="label">群组分配总量：</span>
                <span class="value">{{ groupTotal ? groupTotal.toFixed(2) : groupTotal }}GB</span>
              </div>
              <div>
                <span class="label">群组使用总量：</span>
                <span class="value">{{ groupUse ? groupUse.toFixed(2) : groupUse }}GB</span>
              </div>
              <div>
                <span class="label">待使用总量：</span>
                <span class="value">{{ groupNouse ? groupNouse.toFixed(2) : groupNouse }}GB</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="item" v-if="isEnableNetdisk===1 && branchuseList.length>0">
      <div class="item_title">
        <div class="title_border"></div>
        <div>分院使用情况</div>
      </div>
      <div class="branchuse_content">
        <el-card v-for="(e,i) in branchuseList" :key="i" class="branchUseitem">
          <div class="item_bottom">
            <div class="charts">
              <div class="sub_title">{{ e.branchName }}</div>
              <div class="pieChart" :ref="`active_${i}`"></div>
            </div>
            <div class="msg">
              <div>
                <span class="label">个人分配总量：</span>
                <span class="value">{{ e.totalStorageSize ? e.totalStorageSize.toFixed(2) : e.totalStorageSize }}GB</span>
              </div>
              <div>
                <span class="label">个人使用总量：</span>
                <span class="value">{{ e.storageSize ? e.storageSize.toFixed(2) : e.storageSize }}GB</span>
              </div>
              <div>
                <span class="label">待使用总量：</span>
                <span class="value">{{ e.noUsed ? e.noUsed.toFixed(2) : e.noUsed }}GB</span>
              </div>
            </div>
            <div class="dataTable">
              <el-table
                stripe
                border
                :data="e.tableData"
                style="width: 100%"
              >
                <el-table-column
                  prop="type"
                  label="类型"
                  align="center"
                  width="50px"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="总量（占比）"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ scope.row.total }}({{ scope.row.percent }}%)
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!--    <div v-if="isEnableNetdisk!==1">该学校暂无开启资源库功能</div>-->
    <el-empty :description="`${tipText}`" v-if="isEnableNetdisk!==1"
              style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"
    ></el-empty>
  </div>

</template>
<script>
import * as echarts from 'echarts'
import { allBranchUsedDetail, storageUsedDetail, totalDistribution } from '@/api/library/libraryStorage'
import { isEnableSchoolNetdisk } from '@/api/library_index'

export default {
  name: 'storageMonitor',
  data() {
    return {
      branchuseList: [],
      distributionData: '',
      personUseData: '',
      groupUseData: '',
      schoolStorage: '',
      userStorage: '',
      groupStorage: '',
      noDistribution: '',
      // 个人使用
      personTotal: '',
      personUse: '',
      personNouse: '',
      // 群组使用
      groupTotal: '',
      groupUse: '',
      groupNouse: '',
      isEnableNetdisk: 1,
      tipText: '尚未开通资源库服务，如需使用，请联系管理员'
    }
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''

        function isreize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }

        el.__vueSetInterval__ = setInterval(isreize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  mounted() {
    this.getLibraryStatus()
    // 2是用户，3是群组

  },
  methods: {
    resize() {
      if (this.distributionData) {
        this.distributionData.resize()
      }
      if (this.branchuseList) {
        this.branchuseList.forEach(e => {
          if (e.branchuseItem) {
            e.branchuseItem.resize()
          }

        })
      }
      if (this.personUseData) {
        this.personUseData.resize()
      }
      if (this.groupUseData) {
        this.groupUseData.resize()
      }
    },
    // 2是用户，3是群组
    // 获取资源库用户和群组存储情况
    async getUserStorageInfo(configType) {
      let res = await storageUsedDetail({ configType })
      if (res.code == 200) {
        if (configType == 2) {
          this.personTotal = res.data ? res.data.totalStorageSize : 0
          this.personUse = res.data ? res.data.storageSize : 0
          this.personNouse = res.data ? res.data.noUsed : 0
          this.getpersonData(res.data ? res.data.storageSizePercent : 0, res.data ? res.data.noUsedPercent : 0)
        } else if (configType == 3) {
          this.groupTotal = res.data ? res.data.totalStorageSize : 0
          this.groupUse = res.data ? res.data.storageSize : 0
          this.groupNouse = res.data ? res.data.noUsed : 0
          this.getgroupData(res.data ? res.data.storageSizePercent : 0, res.data ? res.data.noUsedPercent : 0)
        }
      }
    },
    // 获取资源库存储情况
    async getStorageInfo() {
      let res = await totalDistribution()
      if (res.code == 200) {
        this.schoolStorage = res.data ? res.data.schoolStorage : 0
        this.userStorage = res.data ? res.data.userStorage : 0
        this.groupStorage = res.data ? res.data.groupStorage : 0
        this.noDistribution = res.data ? res.data.noDistribution : 0
        this.getdistributionData(res.data ? res.data.userPercent : 0, res.data ? res.data.groupPercent : 0, res.data ? res.data.noDistributionPercent : 0)
      }
    },
    // 获取分院使用情况
    async getBranchStorageInfo() {
      let res = await allBranchUsedDetail()
      if (res.code == 200) {
        let arr = res.data
        if (arr && arr.length > 0) {
          this.branchuseList = arr.map(e => {
            return {
              branchName: e.branchName,
              totalStorageSize: e.totalStorageSize,
              storageSize: e.storageSize,
              noUsed: e.noUsed,
              storageSizePercent: e.storageSizePercent,
              noUsedPercent: e.noUsedPercent,
              tableData: [
                {
                  type: '文档',
                  total: `${e.docSize || '0'}GB`,
                  percent: e.docPercent
                },
                {
                  type: '音频',
                  total: `${e.musicSize || '0'}GB`,
                  percent: e.musicPercent
                },
                {
                  type: '视频',
                  total: `${e.videoSize || '0'}GB`,
                  percent: e.videoPercent
                },
                {
                  type: '图片',
                  total: `${e.imgSize || '0'}GB`,
                  percent: e.imgPercent
                },
                {
                  type: '其他',
                  total: `${e.otherSize || '0'}GB`,
                  percent: e.otherPercent
                }

              ],
              branchuseItem: ''
            }
          })
        }
        setTimeout(() => {
          this.getBranchuseData()
        }, 300)
      }
    },
    // 获取分配情况
    getdistributionData(userPercent, groupPercent, noDistributionPercent) {
      this.distributionData = echarts.init(this.$refs.distribution)
      const title = ['个人', '群组', '未分配']
      const dataValue = [userPercent, groupPercent, noDistributionPercent]
      const dataList = title.map((item, index) => {
        return {
          name: item,
          value: dataValue[index]
        }
      })
      this.setdistribution(dataList)
    },
    // 设置分配情况
    setdistribution(dataList) {
      let option
      option = {
        color: ['#4450BB', '#5F6CE6', '#58C9F7', '#F74D4E', '#FAC231'],
        tooltip: {
          show: true,
          formatter: '{b}: {c}%'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['25%', '50%'],
            itemStyle: {
              borderWidth: 5, //描边线宽
              borderColor: '#fff'
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                return `{b|${params.value}%}\n{a|${params.name}}`
              },
              rich: {
                a: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei',
                  color: '#091158'
                },
                b: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
                  fontWeight: 'bold',
                  color: '#001F3D'
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 5,
                length2: 5,
                align: 'right',
                lineStyle: {
                  width: 1
                }
              }
            },
            data: dataList
          }
        ]
      }
      option && this.distributionData.setOption(option)
    },
    // 获取分院情况
    getBranchuseData() {
      this.branchuseList.forEach((e, i) => {
        e.branchuseItem = echarts.init(Array.isArray(this.$refs[`active_${i}`]) ? this.$refs[`active_${i}`][0] : this.$refs[`active_${i}`])
        const title = ['个人', '未分配']
        const dataValue = [`${e.storageSizePercent}`, `${e.noUsedPercent}`]
        const dataList = title.map((item, index) => {
          return {
            name: item,
            value: dataValue[index]
          }
        })
        this.setbranchuseData(e.branchuseItem, dataList)
      })
    },
    // 设置分院情况z
    setbranchuseData(branchuseItem, dataList) {
      let option
      option = {
        color: ['#cc7a5f', '#dfc581', '#58C9F7', '#F74D4E', '#FAC231'],
        tooltip: {
          show: true,
          formatter: '{b}: {c}%'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['25%', '50%'],
            itemStyle: {
              borderWidth: 5, //描边线宽
              borderColor: '#fff'
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                return `{b|${params.value}%}\n{a|${params.name}}`
              },
              rich: {
                a: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei',
                  color: '#091158'
                },
                b: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
                  fontWeight: 'bold',
                  color: '#001F3D'
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 5,
                length2: 5,
                align: 'right',
                lineStyle: {
                  width: 1
                }
              }
            },
            data: dataList
          }
        ]
      }
      option && branchuseItem.setOption(option)
    },
    // 获取个人情况
    getpersonData(storageSizePercent, noUsedPercent) {
      this.personUseData = echarts.init(this.$refs.personUse)
      const title = ['个人', '待使用']
      const dataValue = [storageSizePercent, noUsedPercent]
      const dataList = title.map((item, index) => {
        return {
          name: item,
          value: dataValue[index]
        }
      })
      this.setpersonData(dataList)
    },
    // 设置个人情况
    setpersonData(dataList) {
      let option
      option = {
        color: ['#cc7a5f', '#dfc581', '#58C9F7', '#F74D4E', '#FAC231'],
        tooltip: {
          show: true,
          formatter: '{b}: {c}%'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['25%', '50%'],
            itemStyle: {
              borderWidth: 5, //描边线宽
              borderColor: '#fff'
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                return `{b|${params.value}%}\n{a|${params.name}}`
              },
              rich: {
                a: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei',
                  color: '#091158'
                },
                b: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
                  fontWeight: 'bold',
                  color: '#001F3D'
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 5,
                length2: 5,
                align: 'right',
                lineStyle: {
                  width: 1
                }
              }
            },
            data: dataList
          }
        ]
      }
      option && this.personUseData.setOption(option)
    },
    // 获取群组情况
    getgroupData(storageSizePercent, noUsedPercent) {
      this.groupUseData = echarts.init(this.$refs.groupUse)
      const title = ['群组', '待使用']
      const dataValue = [storageSizePercent, noUsedPercent]
      const dataList = title.map((item, index) => {
        return {
          name: item,
          value: dataValue[index]
        }
      })
      this.setgroupData(dataList)
    },
    // 设置群组情况
    setgroupData(dataList) {
      let option
      option = {
        color: ['#5793be', '#83c6de', '#58C9F7', '#F74D4E', '#FAC231'],
        tooltip: {
          show: true,
          formatter: '{b}: {c}%'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['25%', '50%'],
            itemStyle: {
              borderWidth: 5, //描边线宽
              borderColor: '#fff'
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                return `{b|${params.value}%}\n{a|${params.name}}`
              },
              rich: {
                a: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei',
                  color: '#091158'
                },
                b: {
                  fontSize: '12px',
                  fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
                  fontWeight: 'bold',
                  color: '#001F3D'
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 5,
                length2: 5,
                align: 'right',
                lineStyle: {
                  width: 1
                }
              }
            },
            data: dataList
          }
        ]
      }
      option && this.groupUseData.setOption(option)
    },
    // 获取当前学校资源库状态
    async getLibraryStatus() {
      let res = await isEnableSchoolNetdisk()
      if (res.code == 200) {
        this.isEnableNetdisk = res.data
        if (this.isEnableNetdisk == 2) {
          this.tipText = '尚未开通资源库服务，如需使用，请联系管理员'
        } else if (this.isEnableNetdisk == 4) {
          this.tipText = '资源库服务已到期，如需继续使用，请联系管理员'
        } else if (this.isEnableNetdisk == 3) {
          this.tipText = '资源库服务已停用，如需继续使用，请联系管理员'
        }
        if (this.isEnableNetdisk == 1) {
          this.getUserStorageInfo(2)
          this.getUserStorageInfo(3)
          this.getStorageInfo()
          this.getBranchStorageInfo()
        }
      }
    }
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
  height: auto;
}

::v-deep .el-table .el-table__cell {
  padding: 4px 0 !important;

}

::v-deep .el-card__body {
  padding: 10px 15px !important;
}

.container {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fafafa;
  min-height: calc(100vh - 84px);
  overflow: auto;

  .item {
    .item_title {
      display: flex;
      align-items: center;
      font-weight: 500;
      margin: 20px 0;
    }

    .title {
      margin-right: 10px;
    }

    .item_title:first-child {
      margin-top: 0;
    }

    .title_border {
      height: 18px;
      width: 4px;
      background-color: #0b8cfc;
      margin-right: 10px;
    }

    .basic_msg {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .basic_item {
        height: 220px;
        width: 32.5%;
        min-width: 380px;
        background-color: #ffffff;
        margin-right: 10px;
        margin-bottom: 20px;
        border-radius: 16px;

        .sub_title {
          font-size: 14px;
          font-weight: 500;
        }

        .item_bottom {
          width: 100%;
          display: flex;
          align-items: center;
          height: 180px;

          .charts {
            height: 100%;
            width: 55%;

            .pieChart {
              width: 100%;
              height: 100%;
            }
          }

          .data_msg {
            width: 45%;
            font-size: 12px;

            div {
              margin-bottom: 10px;

              .label {
                display: inline-block;
                width: 90px;
                text-align: right;
              }
            }
          }
        }
      }

      .basic_item:last-child {
        margin-right: 0;
      }

    }

    .branchuse_content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .branchUseitem {
        width: 49%;
        height: 220px;
        background-color: #ffffff;
        min-width: 500px;
        margin-right: 10px;
        margin-bottom: 20px;
        border-radius: 16px;

        .item_bottom {
          height: 200px;
          display: flex;
          align-items: center;
          width: 100%;

          .charts {
            width: 33%;
            height: 100%;

            .sub_title {
              font-weight: 500;
            }

            .pieChart {
              width: 100%;
              height: 180px;
            }
          }

          .msg {
            width: 33%;
            font-size: 12px;

            div {
              margin-bottom: 10px;

              .label {
                display: inline-block;
                width: 90px;
                text-align: right;
              }
            }
          }

          .dataTable {
            width: 33%;
            height: 100%;
          }
        }
      }

      .branchUseitem:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
